<template>
  <div class="app-container">
   <div style="display: table;width: 100%;">
     <div style="margin: 20px 25px 30px 0;float: right;">
       <el-radio-group v-model="radio2" size="medium">
         <el-radio-button label="今天" ></el-radio-button>
         <el-radio-button label="昨天"></el-radio-button>
         <el-radio-button label="最近7天"></el-radio-button>
         <el-radio-button label="最近30天"></el-radio-button>
       </el-radio-group>
     </div>
   </div>
    <div class="item">
      <nx-data-tabs :option="easyDataOption"></nx-data-tabs>
    </div>
    <p class="warn-content">
      <a href="https://v-charts.js.org/#/" target="_blank">charts组件参考v-charts
      </a>
    </p>
    <ve-line :data="chartData"></ve-line>
  </div>
</template>

<script>
import nxDataTabs from '@/components/nx-data-tabs/nx-data-tabs'
import nxGithubCorner from '@/components/nx-github-corner'
export default {
  name: 'report',
  components: {
    nxDataTabs,
    nxGithubCorner

  },
  data() {
    return {
      radio2: '今天',
      easyDataOption: {
        span: 6,
        data: [
          {
            title: '交易订单数',
            subtitle: '实时',
            count: 7993,
            allcount: 10222,
            text: '昨日全天',
            color: 'rgb(49, 180, 141)',
            key: '类'
          },
          {
            title: '待处理订单',
            subtitle: '实时',
            count: 3112,
            allcount: 10222,
            text: '昨日全天',
            color: 'rgb(56, 161, 242)',
            key: '附'
          },
          {
            title: '浏览量',
            subtitle: '实时',
            count: 908,
            allcount: 10222,
            text: '昨日全天',
            color: 'rgb(117, 56, 199)',
            key: '评'
          },
          {
            title: '访问人数',
            subtitle: '实时',
            count: 908,
            allcount: 10222,
            text: '昨日全天',
            color: 'rgb(59, 103, 164)',
            key: '新'
          },
          {
            title: '访问-付款转换率',
            subtitle: '实时',
            count: 908,
            allcount: '0.00%',
            text: '昨日全天',
            color: 'rgb(59, 103, 164)',
            key: '新'
          }
        ]
      },
      easyDataOption2: {
        color: 'rgb(63, 161, 255)',
        span: 4,
        discount: true,
        data: [
          {
            title: '错误日志',
            count: 12678,
            icon: 'icon-cuowu'
          },
          {
            title: '数据展示',
            count: 12678,
            icon: 'icon-shujuzhanshi2'
          },
          {
            title: '权限管理',
            count: 12678,
            icon: 'icon-jiaoseguanli'
          },
          {
            title: '菜单管理',
            count: 12678,
            icon: 'icon-caidanguanli'
          },
          {
            title: '权限测试',
            count: 12678,
            icon: 'icon-caidanguanli'
          },
          {
            title: '错误页面',
            count: 12678,
            icon: 'icon-caidanguanli'
          }
        ]
      },
      chartData: {
        columns: ['日期', '访问用户', '下单用户', '下单率'],
        rows: [
          { 日期: '1/1', 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
          { 日期: '1/2', 访问用户: 3530, 下单用户: 3230, 下单率: 0.26 },
          { 日期: '1/3', 访问用户: 2923, 下单用户: 2623, 下单率: 0.76 },
          { 日期: '1/4', 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
          { 日期: '1/5', 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
          { 日期: '1/6', 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 }
        ]
      }
    }
  },
  created() {},
  watch: {},
  mounted() {},
  computed: {}
}
</script>

<style scoped>
.item {
  margin-bottom: 16px;
}
</style>
<style lang ="scss">
    @import '../../styles/data-tabs.scss';
</style>
